<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>出租车计算</title>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                //行驶距离
                var distance = document.getElementById("distance").value;
                //6:00~21:00
                var time1 = document.getElementById("time1")
                //21:00~6:00
                var time2 = document.getElementById("time2")
                var time;
                var fee;
                if (time1.checked) {
                    time = time1.value;
                } else if (time2.checked) {
                    time = time2.value;
                }
                //计算
                if (time == "6:00~21:00") {
                    if (distance <= 3) {
                        fee = 8;
                    } else if (distance > 3 && distance <= 10) {
                        distance = distance - 3;
                        fee = 8 + distance * 2.2;
                    } else if (distance > 10) {
                        distance = distance - 10;
                        fee = 8 + 7 * 2.2 + distance * 2.8;
                    }
                } else {
                    if (distance <= 3) {
                        fee = 9;
                    } else if (distance > 3 && distance <= 10) {
                        distance = distance - 3;
                        fee = 8 + distance * 3;
                    } else if (distance > 10) {
                        distance = distance - 10;
                        fee = 8 + 7 * 3 + distance * 3.6;
                    }
                }
                document.getElementById("fee").value = fee;
            }
        }
    </script>
</head>
<body>

当前时间段：
6:00~21:00<input id="time1" name="1" type="radio" value="6:00~21:00">
21:00~6:00<input id="time2" name="1" type="radio" value="21:00~6:00"><br>
行驶距离：<input id="distance" type="text"><br>
需要支付费用：<input id="fee" readonly type="text"><br>
<input type="reset" value="重置"><input id="btn" type="button" value="计算">
</body>
</html>